<template>
	<!-- 酒店认证 -->
	<view class="enterprise">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="企业认证"></tab-top>
		<!-- #endif -->
		<!-- 企业信息 -->
		<view class="set_box">
			<!-- 企业名称 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>企业名称</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="text"  v-model="enterprise_name" placeholder="请输入企业真实名称"/>
				</view>
			</view>
			<!-- 统一信用代码 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>统一信用代码</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" v-model="credit_code" type="text" placeholder="请输入和证件上一致的号码" maxlength="20" minlength="16"/>
				</view>
			</view>
			<!-- 法人 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>法人/负责人</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="text" v-model="legal_person" placeholder="请输入法人/负责人姓名"/>
				</view>
			</view>
			<!-- 法人 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>法人/负责人联系电话</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="text" v-model="contacts_two_phone" maxlength="11" placeholder="请输入法人/负责人电话"/>
				</view>
			</view>
			<!-- 法人身份证号 -->
			<view class="set_item last">
				<view class="set_item_left">
					<text>法人/负责人身份证号</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="number" v-model="id_card" placeholder="请输入法人/负责人身份证号" maxlength="18" minlength="18"/>
				</view>
			</view>
		</view>
		<view class="bg_03"></view>
		
		<!-- 上传身份证 -->
		<view class="attestation_main" style="margin-bottom: 50upx;">
			<view class="title">请上传法人/负责人的身份证正反面照片</view>
			<view class="attestation_item">
				<image class="attestation_Img" 
				@tap="changeImg('positive_photo')"
				:src="positive_photo ? positive_photo + '?imageView2/1/w/1104/h/594':'/static/bg/front.png'"></image>
			</view>
			<view class="attestation_item box">
				<image class="attestation_Img" 
				@tap="changeImg('negative_photo')"
				:src="negative_photo ? negative_photo + '?imageView2/1/w/1104/h/594':'/static/bg/reverse.png'"></image>
			</view>
			<view class="attestation_text">
				<image class="safeguard" src="/static/icon/safeguard.png"></image>
				<text>信息已加密，仅用于身份认证</text>
			</view>
		</view>
		
		<!-- 上传营业执照 -->
		<view class="attestation_main">
			<view class="title">请上传企业营业执照</view>
			<view class="enterprise_item">
				<image class="enterprise_Img" 
				@tap="changeImg('license_photo')"
				:src="license_photo ? license_photo + '?imageView2/1/w/994/h/1346':'/static/bg/enterprise.png'"></image>
			</view>
			<view class="attestation_text">
				<image class="safeguard" src="/static/icon/safeguard.png"></image>
				<text>信息已加密，仅用于身份认证</text>
			</view>
			<view class="hotel_agreement" @tap="agrActive=!agrActive">
				<view class="agr_left " :class="[agrActive?'agr_active':'']">
					<image src="/static/identity/check_active.png" mode=""></image>
				</view>
				<view class="agr_right" @tap.stop="goAgreement()">我已同意<text style="color: #3595f9;">酒店入驻合作协议</text></view>
			</view>
		</view>
		
		<button class="button" @tap="enterprise">提交认证</button>
		<view class="bg_04"></view>
	</view>
</template>

<script>
	import qiniuUpload from "@/common/qiniuUpload.js"
	export default{
		data(){
			return{
				enterprise_name:'',
				credit_code:'',
				legal_person:'',
				id_card:'',
				contacts_two_phone: '',
				positive_photo:'',
				negative_photo:'',
				license_photo:'',
				agrActive:false
			}
		},
		onLoad() {
			this.req({
				url:'user/accountInfo',
				method:"get",
				data:{
					id:this.isLogin().id
				}
			},(res)=>{
				let dataD = res.data.data.hotel_info
				if(dataD){
					this.enterprise_name = dataD.enterprise_name
					this.credit_code = dataD.credit_code
					this.legal_person = dataD.legal_person
					this.id_card = dataD.id_card
					this.contacts_two_phone = dataD.contacts_two_phone
					this.positive_photo = dataD.positive_photo
					this.negative_photo = dataD.negative_photo
					this.license_photo = dataD.license_photo	
				}
			})
		},
		methods: {
			changeImg(img){
				/**
				 * 点击图片获取身份证并更新
				 */
				uni.chooseImage({ 
					/**
					 * 获取本地，相机图片
					 */
					count: 1, // 图片数量
					success: (request)=> {	// 获取图片成功
						let Upload = img
						let filePath = request.tempFilePaths[0] // 获取图片成功后赋值filePath
						uni.request({
							/**
							 * 请求后端七牛云token
							 */
							url: this.GLOBAL.domain + 'api/getQiniuToken',
							success: (res) => { 
								let totoken = res.data.data.token; //获取token成功后赋值给totoken
								let domain = res.data.data.domain
								let date = new Date() //时间戳
								qiniuUpload({
									/**
									 * 获取token成功后执行上传七牛云
									 */
									filePath: filePath, //file对象
									key: "idCard" + this.isLogin().id + date.getTime() + ".png", //key
									url: domain, //后台七牛域名
									totoken: totoken, //后台七牛token
									callback: {  // 回调
										success: (e) => {  // 上传成功后返回图片地址数据
											//console.log(e)
											let imageURL = e.imageURL; // 上传成功后赋值imageURL
											this[img] = imageURL
										},
										fail: (err) => {
											console.log('失败')
											console.log(err)
										}
									}
								})
								
							},
							fail: () => {
								uni.showToast({
									title: '上传失败,请重试'
								});
							}
						})
					}
				});
			},
			enterprise() {
				/**
				 * 提交认证
				 */
				let dataD = JSON.parse(JSON.stringify(this._data));
				dataD.uid = this.isLogin().id;
				dataD.hotel_auth = 2;
				delete dataD.agrActive
				if(this.formValidation()){
					if(this.isLogin().hotel_id){
						this.req({
							url: 'user/hotel/' + this.isLogin().hotel_id,
							method:'put',
							data: dataD
						},(res) => {
							if(res.data.status == 0){
								this.showToast(res.data.message);
							}
							uni.navigateTo({
								url: '/pages/user/auditor'
							});
						},(err) => {
							uni.showToast({
								title:"服务器繁忙"
							});
						})	
						return;
					}
					this.req({
						url: 'user/hotel',
						method:'post',
						data: dataD
					},(res) => {
						this.modifyUserInfo("hotel_id",res.data.data.id)
						uni.navigateTo({
							url: '/pages/user/auditor'
						});
					},(err) => {
						uni.showToast({
							title:"服务器繁忙"
						});
					})
				}
			},
			formValidation(){
				if(!this.enterprise_name){
					uni.showToast({
						title:"请填写企业名称",
						icon: 'none'
					});
					return false
				}
				if(!this.credit_code){
					uni.showToast({
						title:"请填写信用代码",
						icon: 'none'
					});
					return false
				}
				if(!this.legal_person){
					uni.showToast({
						title:"请填写法人/负责人",
						icon: 'none'
					});
					return false
				}
				if(!this.contacts_two_phone){
					uni.showToast({
						title:"请填写法人/负责人联系电话",
						icon: 'none'
					});
					return false
				}
				if(!this.agrActive){
					uni.showToast({
						title:"需先同意酒店入住协议",
						icon: 'none'
					});
					return false
				}
				if(!this.id_card){
					uni.showToast({
						title:"请填写法人身份证",
						icon: 'none'
					});
					return false
				}else{
					let regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
					if(!regIdNo.test(this.id_card)){  
						uni.showToast({
							title:"请填写正确的身份证",
							icon:'none'
						}); 
						return false;  
					}  
				}
				if(!this.positive_photo){
					uni.showToast({
						title:"请填上传身份证正面",
						icon: 'none'
					});
					return false
				}
				if(!this.negative_photo){
					uni.showToast({
						title:"请填上传身份证反面",
						icon: 'none'
					});
					return false
				}
				if(!this.license_photo){
					uni.showToast({
						title:"请填上传营业执照",
						icon: 'none'
					});
					return false
				}
				return true;
			},
			/**
			 * 跳转到协议页面
			 */
			goAgreement(){
				uni.navigateTo({
					url: '/pages/user/set/agreement'
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
.enterprise{
	color: #333333;
	.enterprise_herder {
		width: 442upx;
		height: 180upx;
		padding: 60upx 154upx 48upx 154upx;
		.enterprise_top {
			width: 442upx;
			height: 130upx;
			display: flex;
			align-items: center;
			.top_img {
				width: 180upx;
				height: 130upx;
				border-radius: 8upx;
			}
			.top_img_r {
				width: 67upx;
				height: 35upx;
				margin-right: 20upx;
			}
		}
		.enterprise_bommon {
			width: 442upx;
			height: 50upx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.bommon_img_l {
				width: 28upx;
				height: 28upx;
				margin-left: 76upx;
			}
			.bommon_img_r {
				width: 28upx;
				height: 28upx;
				margin-right: 76upx;
			}
		}
	}
	.set_box{
		width: 702upx;
		padding: 0 24upx;
		.set_item:nth-last-child(1){
			border:none;
		}
		.set_item.last{
			border-bottom: 1upx solid #e5e5e5;
		}
		.set_item{
			height: 98upx;
			border-bottom: 1upx solid #e5e5e5;
			line-height: 98upx;
			display: flex;
			justify-content: space-between;
			.set_item_left{
				font-size: 28upx;
			}
			.set_item_reght{
				font-size: 28upx;
				color: #999999;
				display: flex;
				align-items: center;
				.input[type]{
					margin-left: 40upx; 
					font-size: 28upx;
					line-height: 98upx;
					height: 28upx;
					text-align: right;
				}
			}
		}
	}
	.attestation_main{
		text-align: center;
		.title{
			height: 50upx;
			line-height: 50upx;
			font-size: 32upx;
		}
		.attestation_item{
			margin: 0 auto;
			width: 564upx;
			height: 360upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.attestation_Img{
				width: 550upx;
				height: 348upx;
				border-radius: 8upx;
			}
		}
		.enterprise_item{
			margin: 0 auto;
			width: 508upx;
			height: 690upx;
			display: flex;
			justify-content: center;
			align-items: center;
			.enterprise_Img{
				width: 497upx;
				height: 673upx;
				background-color: #9ccafa;
				border-radius: 8upx;
			}
		}
		.box{
			margin-top: 30upx;
		}
		.attestation_text{
			.safeguard{
				width: 16upx;
				height: 18upx;
				margin-right: 8upx;
				vertical-align: middle;
			}
			height: 46upx;
			line-height: 46upx;
			font-size: 18upx;
			color: #b5b5b5;
		}
		.hotel_agreement{
			width: 260upx;
			height: 20upx;
			margin: 0 auto;
			margin-top: 19upx;
			.agr_left{
				float: left;
				width: 20upx;
				height: 20upx;
				margin-right: 12upx;
				border: 1upx solid #999999;
				border-radius: 50%;
				box-sizing: border-box;
				image{
					display: none;
					float: left;
					width: 100%;
					height: 100%;
				}
			}
			.agr_active{
				border:none;
				image{
					display: block;
				}
			}
			.agr_right{
				float: left;
				font-size: 18upx;
				line-height: 1;
				color: #999999;
			}
		}
	}
	.button{
		width: 540upx; 
		height: 90upx;
		background-color: #3595f9;
		border-radius: 8upx;
		font-size: 32upx;
		color: #ffffff;
		margin-top: 98upx;
	}
	.bg_01{
		width: 750upx;
		height: 30upx;
		background-color: #f0f0f0;
	}
	.bg_02{
		width: 750upx;
		height: 10upx;
		background-color: #f0f0f0;
	}
	.bg_03{
		width: 750upx;
		height: 62upx;
	}
	.bg_04{
		width: 750upx;
		height: 46upx;
	}
}
</style>

